/// 此处存放有关于辅助功能的封装方法
@use "sass:math";

/// 计算数值占据基数的百分比
/// @param {number} $val 将要被计算的目标值
/// @param {string} $base [100] 基数值，默认为100
/// @param {string} $round [2] 省略小数点后几位，默认为2
/// @return {string} 百分比计算值，带有%单位
/// @group xz-helper
/// @author XianZheCwx
@function percent($val, $base: 100, $round: 2) {
  $percentBase: pow(10, $round);
  @return "#{math.div(math.round(math.div($val, $base) * $base * $percentBase), $percentBase)}%"
}

/// 制造一定存在的值，并确保附加单位
/// @param {number} $val 原始值
/// @param {number} $def [0] 若值为空时的替换值，默认为0
/// @param {string} $unit [px] 目标单位，默认为px
/// @return {number} 处理值
/// @group xz-helper
/// @author XianZheCwx
@function makeExistVal($val, $def: 0, $unit: px) {
  $last: $def;
  @if $val {
    $last: $val;
  }
  // 单位是否存在
  @if unitless($last) {
    $last: $last + $unit;
  }

  @return $last;
}

/// 页面安全容器
/// @param {number} $minHeight [98.2vh] 最小高度，默认98.2vh
/// @param {string} $bgc [transparent] 背景颜色，默认transparent
/// @param {number} $around [30px] 边距，默认30px
/// @param {number} $top [0] 顶部额外边距，默认0
/// @param {number} $bottom [36px] 底部额外边距，默认36px。
///         若为false，但启用安全边距和边距的情况下，使用边距作为下边距。
/// @param {boolean} $padding [true] 是否启用边距，默认true
/// @param {Boolean} $safeBottom [true] 是否启用底部安全边距
/// @group xz-helper
/// @author XianZheCwx
@mixin container(
  $minHeight: 98.2vh, $bgc: transparent,
  $around: 30px, $top: 0, $bottom: 36px,
  $padding: true, $safeBottom: true
) {
  box-sizing: border-box;

  @if $minHeight {
    min-height: $minHeight;
  }

  @if $bgc {
    background-color: $bgc;
  }

  @if $padding {
    padding: calc(
      #{makeExistVal($around)}
      + #{makeExistVal($top)}) $around makeExistVal($bottom);
  }

  @if $safeBottom {
    @if $bottom {
      padding-bottom: calc(#{$bottom} + env(safe-area-inset-bottom, 0));
    } @else if ($padding) {
      padding-bottom: calc(#{makeExistVal($around)} + env(safe-area-inset-bottom, 0));
    } @else {
      padding-bottom: env(safe-area-inset-bottom, 0);
    }
  }
}

/// 文本溢出隐藏
/// @param {number} $line [1] 指定第几行隐藏
/// @param {string} $overflow [ellipsis] 溢出内容隐藏方式，默认ellipsis
/// @group xz-helper
/// @author XianZheCwx
@mixin textHidden($line: 1, $overflow: ellipsis) {
  overflow: hidden;
  text-overflow: $overflow;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}
